<template>
  <div>
    <!-- <van-icon class="revoke" name="revoke" @click="back()" /> -->
    <back></back>
    <div v-if="id == 1">
      <loading v-if="bastBanner.length == 0"></loading>
      <van-swipe class="my-swipe" indicator-color="rgb(233, 51, 35)">
        <van-swipe-item v-for="r in bastBanner" :key="r.id">
          <img :src="r.img" />
        </van-swipe-item>
      </van-swipe>
      <div class="flex">
        <div class="line"></div>
        <div class="title"><van-icon name="gem-o" />精品推荐</div>
        <div class="line"></div>
      </div>
      <loading v-if="bastList.length == 0"></loading>
      <shop-list :shoplist="bastList"></shop-list>
    </div>
    <div v-if="id == 2">
      <loading v-if="bastBanner.length == 0"></loading>
      <van-swipe class="my-swipe" indicator-color="rgb(233, 51, 35)">
        <van-swipe-item v-for="r in bastBanner" :key="r.id">
          <img :src="r.img" />
        </van-swipe-item>
      </van-swipe>
      <div class="flex">
        <div class="line"></div>
        <div class="title"><van-icon name="fire-o" />热门榜单</div>
        <div class="line"></div>
      </div>
      <loading v-if="firstList.length == 0"></loading>
      <shop-list :shoplist="firstList"></shop-list>
    </div>
    <div v-if="id == 3">
      <loading v-if="bastBanner.length == 0"></loading>
      <van-swipe class="my-swipe" indicator-color="rgb(233, 51, 35)">
        <van-swipe-item v-for="r in bastBanner" :key="r.id">
          <img :src="r.img" />
        </van-swipe-item>
      </van-swipe>
      <div class="flex">
        <div class="line"></div>
        <div class="title"><van-icon name="fire-o" />首发新品</div>
        <div class="line"></div>
      </div>
      <loading v-if="firstList.length == 0"></loading>
      <shop-list :shoplist="firstList"></shop-list>
    </div>
    <div v-if="id == 4">
      <loading v-if="bastBanner.length == 0"></loading>
      <van-swipe class="my-swipe" indicator-color="rgb(233, 51, 35)">
        <van-swipe-item v-for="r in bastBanner" :key="r.id">
          <img :src="r.img" />
        </van-swipe-item>
      </van-swipe>
      <div class="flex">
        <div class="line"></div>
        <div class="title"><van-icon name="hot-o" />促销单品</div>
        <div class="line"></div>
      </div>
      <!-- <loading v-if="benefit.length == 0"></loading> -->
      <!-- <shop-list :shoplist="firstList"></shop-list> -->
      <hot-list :benefit="benefits"></hot-list>
    </div>
  </div>
</template>
<script>
import ShopList from "@/components/ShopList";
import Loading from "@/components/Loading";
import HotList from "@/components/HotList";
import Back from "@/components/Back.vue";
export default {
  name: "NewHot",
  props: {
    id: [String, Number],
    shoplist: Array,
    benefit:Array,
  },
  data() {
    return {
      bastList: [],
      bastBanner: [],
      firstList: [],
      benefits:[],
    };
  },
  components: {
    ShopList,
    Loading,
    HotList,
    Back,
  },
  created() {
    this.axios.get("/index").then((re) => {
      this.bastList = re.info.bastList;
      console.log(re);
      this.bastBanner = re.info.bastBanner;
      this.firstList = re.info.firstList;
      this.benefits = re.info.bastList;
    });
  },
};
</script>
<style lang="less" scoped>
.my-swipe {
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    text-align: center;
  }
  img {
    width: 100%;
    height: 150px;
  }
}
.flex {
  display: flex;
  align-items: center;
  color: #444;
  font-size: 20px;
  text-align: center;
  div {
    flex: 1;
  }
  .line {
    width: 20px;
    height: 1px;
    background: #99999940;
    margin: 5px;
  }
}
</style>
